<template>
  <div class="formbox">
    <el-form
      style="height:100px"
      class="formbox1"
      :model="FormData1"
      :rules="formrules1"
      ref="FormData1"
    >
      <el-form-item>
        <p class="ptop">订刊信息</p>
      </el-form-item>
      <el-form-item>
        <el-row
          style="margin-left: 20px;height: 10%; display: flexbox;"
          :gutter="10"
        >
          <el-col style="height: 25px;width: auto;text-align: center;">{{this.magazine.magazine}}</el-col>
          <el-col style="height: 25px;width: auto;">(xxx元/年，全年xx期)</el-col>
        </el-row>
      </el-form-item>
      <el-row style="margin-left: 20px;height: 20px; display: flexbox;">
        <el-form-item
          prop="year"
          style="width: 130px;height: 25px;float: left;"
        >
          <el-col style="height: 25px;width: auto;text-align: center;margin-left: 5px">年份</el-col>
          <el-col style="height: 25px;width: auto;margin:0 3px 0 5px;">
            <el-select
              style="width: 90px;"
              v-model="FormData1.year"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          prop="periods_start"
          style="width: 110px;height: 25px;float: left;"
        >
          <el-col style="height: 25px;width: auto;text-align: center;margin-left: 5px;">起止期</el-col>
          <el-col style="height: 25px;width: auto;margin:0 3px 0 5px;">
            <el-select
              style="width: 60px;"
              v-model="FormData1.periods_start"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          style="width: 90px;height: 25px;float: left;"
          prop="periods_end"
        >
          <el-col style="height: 25px;width: auto;text-align: center;margin-left: 5px;">-</el-col>
          <el-col style="height: 25px;width: auto;margin:0 3px 0 5px;">
            <el-select
              style="width: 60px;"
              v-model="FormData1.periods_end"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          style="width: 100px;height: 25px;float: left;"
          prop="quantity"
        >
          <el-col style="height: 25px;width: auto;text-align: center;margin-left: 5px;">份数</el-col>
          <el-col style="height: 25px;width: auto;margin:0 3px 0 5px;">
            <el-input
              style="width: 60px;"
              v-model="FormData1.quantity"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item style="width: 100px;height: 25px;float: left;">
          <el-col style="height: 25px;width: auto;margin-left: 30px;">金额</el-col>
          <el-col
            style="height: 30px;width: auto;text-align: center;margin-left: 5px; font-size: 18px;color: #ba1a24;"
            v-model="FormData1.money"
          >20</el-col>
        </el-form-item>
      </el-row>

    </el-form>
    <el-form
      style="height: 230px;"
      :model="FormData2"
      :rules="formrules2"
      ref="FormData2"
    >
      <p class="ptop">订阅信息</p>
      <el-form-item prop="company">
        <el-row style="height: 20px; display: flexbox;">
          <e-col style="height:25px;width:  8%; float: left; text-align: right;">单位</e-col>
          <el-col style="width:88% ;margin-left: 8px;height: 25px;"><el-input
              style="width:100%;"
              v-model="FormData2.company"
            ></el-input></el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="name">
        <el-row style="height: 20px; display: flexbox;">
          <e-col style="height:25px;width: 8%; float: left; text-align: right;">联系人</e-col>
          <el-col
            style="width:88% ;margin-left: 8px;height: 25px;"
            v-model="FormData2.name"
          ><el-input style="width:100%;"></el-input></el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="tele">
        <el-row style="height: 20px; display: flexbox;">
          <e-col style="height:25px;width:  8%; float: left; text-align: right;">电话</e-col>
          <el-col
            style="width:88% ;margin-left: 8px;height: 25px;"
            v-model="FormData2.tele"
          ><el-input style="width:100%;"></el-input></el-col>
        </el-row>
      </el-form-item>

      <el-row style="height: 20px; display: flexbox;">
        <el-form-item style="height: 20px;width: 8%; float: left;text-align: right;">
          <e-col style="height:20px;width: 100%; float: left; text-align: right;">地址</e-col>
        </el-form-item>
        <el-form-item
          style="height: 20px;width: 29%;float: left;"
          prop="province"
        >
          <el-col style="height: 20px;width: 100%;margin:0 3px 0 7px;padding-right: 10px;">
            <el-select
              style="width: 100%;"
              v-model="FormData2.province"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          style="height: 20px;width: 29%;float: left;"
          prop="city"
        >
          <el-col style="height: 20px;width: 100%;margin:0 3px 0 0px;padding-right: 3px;">
            <el-select
              style="width: 100%;"
              v-model="FormData2.city"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          style="height: 20px;width: 29%;float: left;"
          prop="county"
        >
          <el-col style="height: 20px;width: 100%;margin:0 3px 0 0px;padding-right: 3px;">
            <el-select
              style="width:100%"
              v-model="FormData2.county"
            >
              <el-option></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-row>
      <el-form-item prop="address">
        <el-row>
          <el-col style="height:25px;width: 8%; float: left; text-align: right;"></el-col>
          <el-col style="width:88% ;margin-left: 8px;height: 25px;"><el-input
              style="width:100%;"
              v-model="FormData2.address"
            ></el-input></el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row style="height: 20px; display: flexbox;">
          <e-col style="height:25px;width: 8%; float: left; text-align: right;">焦订分投</e-col>
          <el-col style="width:85% ;margin-left: 8px;height: 25px;">
            <el-radio-group v-model="addradio">
              <el-radio label="1">单地址</el-radio>
              <el-radio label="2">多地址</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row style="height: 20px;display: flexbox;">
          <e-col style="height:25px;width: 8%; text-align: right;float: left;">是否开发票</e-col>
          <el-col style="width:85% ;margin-left: 8px;height: 25px;">
            <el-radio-group v-model="invoiceradio">
              <el-radio label='-1'>不开发票</el-radio>
              <el-radio label='4'>开一张发票</el-radio>
              <el-radio label='5'>开多张发票</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-form
      style="height: auto;"
      v-show="addrshowtable()"
      :model="publicationinfo"
      :rules="tablerule1"
      ref="publicationinfo"
    >
      <el-row style="height: 20px; display: flexbox;">
        <el-col style="width: 100px;">
          <p class="ptop">收刊信息</p>
        </el-col>
        <el-col style="width: 110px;float: right;"><el-button
            style="width: 100px;color: white;background-color: #9c01ff;font-size: 10px;height: 10px;line-height: 0;width: 100px;float: right;margin: 5px 10px 0px 3px ;"
          >下载模板</el-button></el-col>
        <el-col style="width: 110px;float: right;"><el-button
            style="color: white;background-color: #ba1a24; font-size: 10px;height: 20px;line-height: 0;width: 100px;float: right;margin: 5px 10px 0px 3px ;"
          >上传表格</el-button></el-col>
      </el-row>

      <el-table
        border
        :data="publicationinfo"
        style='margin:20px 0 0 1%;width: 98%;'
      >
        <el-table-column
          label="序号"
          width="50px"
          prop='id'
        ></el-table-column>

        <el-table-column
          label="收刊单位名称"
          width="auto"
        >
          <el-form-item prop="company"><el-input v-model="publicationinfo.company"></el-input></el-form-item>
        </el-table-column>

        <el-table-column
          label="详细地址"
          width="auto"
        >
          <el-form-item prop="address"><el-input v-model="publicationinfo.address"></el-input></el-form-item>
        </el-table-column>

        <el-table-column
          label="联系电话"
          width="auto"
        >
          <el-form-item prop="tele"><el-input v-model="publicationinfo.tele"></el-input></el-form-item>
        </el-table-column>

        <el-table-column
          label="收件人"
          width="auto"
        >
          <el-form-item prop="name"><el-input></el-input v-model="publicationinfo.name"></el-form-item>
        </el-table-column>

        <el-table-column
          label="邮编"
          width="auto"
        >
          <el-form-item prop="postcode"><el-input></el-input v-model="publicationinfo.postcode"></el-form-item>
        </el-table-column>

        <el-table-column
          label="数量"
          width="auto"
        >
          <el-form-item prop="quantity"><el-input></el-input v-model="publicationinfo.quantity"></el-form-item>
        </el-table-column>

        <el-table-column
          label="收刊方式"
          width="auto"
        >
          <el-form-item prop="type"><el-select v-model="publicationinfo.type">
              <el-option
                label="平邮"
                value="0"
              ></el-option>
              <el-option
                label="挂号"
                value="1"
              ></el-option>
            </el-select></el-form-item>
        </el-table-column>
        <el-table-column
          label="操作"
          width="50px"
        >
          <el-form-item>
            <template slot-scope="scope">
              <el-link
                style="font-size: 11px; color: #ba1a24;"
                width="auto"
                @click="deletejournallist(scope.$index)"
              >删除</el-link>
            </template>
          </el-form-item>
        </el-table-column>

      </el-table>
      <el-form-item>
        <el-row style="padding-bottom: 10px;">
          <el-col style="width: 100px;"><el-button
              style="color: white; background-color: #ba1a24; font-size: 13px;height: 30px;line-height: 0;width: 80px;float: left;margin: 5px 10px 0px 10px ;"
              @click="addjournallist"
            >添加行</el-button></el-col>
          <el-col style="float: right;width: 100px;">分发地址共{{this.publicationinfo.length}}个</el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-form
      style="height: auto;"
      v-show="invoiceshowtable()"
      :model='invoiceinfo'
      :rules="tablerule2"
      ref="invoiceinfo"
    >
      <el-row style="height: 20px; display: flexbox;">
        <el-col style="width: 100px;">
          <p class="ptop">发票信息</p>
        </el-col>
        <el-col style="width: 110px;float: right;"><el-button
            style="width: 100px;color: white;background-color: #9c01ff;font-size: 10px;height: 10px;line-height: 0;width: 100px;float: right;margin: 5px 10px 0px 3px ;"
          >下载模板</el-button></el-col>
        <el-col style="width: 110px;float: right;"><el-button
            style="color: white;background-color: #ba1a24; font-size: 10px;height: 20px;line-height: 0;width: 100px;float: right;margin: 5px 10px 0px 3px ;"
          >上传表格</el-button></el-col>
      </el-row>

      <el-table
        border
        :data="invoiceinfo"
        style="width: 98%;margin:20px 0 0 1%;"
      >
        <el-table-column
          label="序号"
          width="50px%"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="单位名称"
          width="auto"
        >
          <el-form-item prop="company"><el-input v-model="invoiceinfo.company"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="统一社会信用代码"
          width="auto"
        >
          <el-form-item prop="companyid"><el-input v-model="invoiceinfo.companyid"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="地址"
          width="auto"
        >
          <el-form-item prop="comaddress"><el-input v-model="invoiceinfo.comaddress"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="开户行"
          width="auto"
        >
          <el-form-item prop="combank"><el-input v-model="invoiceinfo.combank"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="银行账号"
          width="auto"
        >
          <el-form-item prop="comaccount"><el-input v-model="invoiceinfo.comaccount"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="电子邮箱"
          width="auto"
        >
          <el-form-item prop="email"><el-input v-model="invoiceinfo.email"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="手机号"
          width="auto"
        >
          <el-form-item prop="mobile"><el-input v-model="invoiceinfo.mobile"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="数量"
          width="auto"
        >
          <el-form-item prop="quantity"><el-input v-model="invoiceinfo.quantity"></el-input></el-form-item>
        </el-table-column>
        <el-table-column
          label="操作"
          width="50px"
        >
          <template slot-scope='scope'>
            <el-link
              style="font-size: 11px;color: #ba1a24;"
              width="auto"
              @click="deleteinvoicelist(scope.$index)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      </el-form-item>
      <el-form-item>
        <el-row style="padding-bottom: 10px;">
          <el-col style="width: 100px;"><el-button
              style="color: white; background-color: #ba1a24; font-size: 13px;height: 30px;line-height: 0;width: 80px;float: left;margin: 5px 10px 0px 10px ;"
              @click="addinvoicelist"
            >添加行</el-button></el-col>
          <el-col style="float: right;width: 100px;">发票数量共{{this.invoiceinfo.length}}个</el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item>
        <p class="ptop">备注信息</p>
      </el-form-item>
      <el-form-item style="display: flexbox;">
        <el-row style="margin-left: 5%; ">
          <p style="float: left;padding: 0;margin: 0 10px 0 0;height: 20px;">备注</p>
          <el-input
            style="width: 80%;float: left;margin: 10px 0 20px 10px;"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </el-row>
      </el-form-item>
    </el-form>
    <div style="margin:0 0 30px 0 ;display: flex; align-items: center; justify-content: center;">
      <el-row style="width: 300px;">
        <el-col style="width: 100px;"><el-button
            style="color: white; background-color: #ba1a24; font-size: 13px;height: 30px;line-height: 0;width: 80px;margin: 20px 10px 0px 10px ;"
            @click="submitForm()"
          >提交</el-button></el-col>
        <el-col style="width :100px;float: left;"><el-button
            class="cancelbtn"
            style=" border:1px solid #ba1a24;font-size:  13px;height: 30px;line-height: 0;width: 80px;margin: 20px 10px 0px 10px ;"
          >取消</el-button></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { journaldata } from '../../api/basisMG'
export default {
  name: 'order-page',
  data() {
    return {
      orderId: '',
      addradio: '1',
      invoiceradio: '3',
      invoiceurl: '',
      addressurl: '',
      tableinvoiceshow: false,
      addrnum: 3,
      invioces: 4,
      options: [{
        value: '',
        label: 2025
      },
      {
        value: '',
        label: 2024
      }],
      invoiceinfo: [
        {
          id: 1,
          company: 'cafe',
          companyid: '',
          comaddress: '',
          combank: '',
          comaccount: '',
          email: '',
          mobile: '',
          quantity: ''
        }
      ],
      yearoption: [],
      monthoption: [],
      provenceid: [],
      cityid: [],
      townid: [],
      remarks: '',
      publicationinfo: [
        {
          id: 1,
          company: '',
          address: '',
          tele: '',
          name: '',
          postcoe: '',
          type: 1,
          quantity: ''
        }
      ],
      // 订刊信息
      FormData1: {
        mid: '',
        year: '',
        periods_start: '',
        periods_end: '',
        quantity1: '',
        quantity2: '',
        quantity3: '',
        money: ''
      },
      // 订阅信息
      FormData2: {
        money: '',
        company: '',
        name: '',
        tele: '',
        province: '',
        city: '',
        county: '',
        address: '',
        type: this.addradio,
        invoice: this.invoiceradio
      },
      formrules1: {
        year: [{ required: true, message: '请选择年份', trigger: 'blur' }],
        periods_start: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
        periods_end: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
        quantity: [{ required: true, message: '请选择份数', trigger: 'blur' }],
      },
      formrules2: {
        company: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        tele: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        province: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        city: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        county: [{ required: true, message: '请选择市', trigger: 'blur' }],
        address: [{ required: true, message: '请选择地区', trigger: 'blur' }],
      },
      tablerule1: {
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        company: [{ required: true, message: '请输入收刊单位', trigger: 'blur' }],
        tele: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        name: [{ required: true, message: '请输入收件人', trigger: 'blur' }],
        postcode: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
        type: [{ required: true, message: '请选择收刊方式', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      tablerule2: {
        company: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        companyid: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        comtele: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        combank: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
        comaccount: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      magazine: {}
    }

  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.orderId = val.query.id
      }
    }
  },
  created() {

  },
  methods: {
    getData() {

    },
    // 收刊信息显示
    addrshowtable() {
      if (this.addradio == '1') {
        return false
      } else if (this.addradio == '2') {
        return true
      }
    },
    invoiceshowtable() {
      if (this.invoiceradio == '-1') {
        return false
      } else if (this.invoiceradio == '4' || this.invoiceradio == '5') {
        return true
      }
    },
    // 收刊添加行
    addjournallist() {
      this.arr = {
        id: this.orderId,
        company: '',
        address: '',
        tele: '',
        name: '',
        postcoe: '',
        type: 1,
        quantity: ''
      }
      console.log(this.arr)
      this.publicationinfo.push(this.arr)

    },
    // 收刊信息删除行
    deletejournallist(i) {
      if (this.publicationinfo.length > 1) {
        this.publicationinfo.splice(i, 1)
      }

    },
    // 添加行
    addinvoicelist() {
      this.arr = {
        id: this.orderId,
        company: 'cafe',
        companyid: '',
        comaddress: '',
        combank: '',
        comaccount: '',
        email: '',
        mobile: '',
        quantity: ''
      }
      console.log(this.arr)
      this.invoiceinfo.push(this.arr)
    },
    // 发票删除行
    deleteinvoicelist(i) {
      if (this.invoiceinfo.length > 1) {
        this.invoiceinfo.splice(i, 1)
      }
    },
    async submitForm() {
      await this.$refs.FormData1.validate();
      await this.$refs.FormData2.validate();
      if (this.addradio !== '1') {
        await this.$refs.publicationinfo.validate();

      }
      if (this.invoiceradio !== '-1') {
        await this.$refs.invoiceinfo.validate();
      }
      journaldata()
    }

  }
}
</script>

<style scoped>
.formbox {
  margin: 0 20% 0 20%;
}
.el-form-item {
  height: auto;
  margin: 2px 0 2px 0;
}
::v-deep .el-form-item__content {
  font-size: 11px;
}
.el-form {
  margin-top: 20px;
  border-radius: 5px;
  background-color: #fff;
}
.ptop {
  border-bottom: 2px solid #b9151e;
  width: 70px;
  height: 20px;
  margin: 5px 0 5px 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: 宋体;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-input__inner {
  height: 20px;
}
.el-row {
  font-size: 12px;
  font-weight: 400;
}
.formbox2 {
  height: 240px;
}
.el-radio {
  font-size: 11px;
}
::v-deep .el-radio__label {
  font-size: 10px;
  font-weight: 600;
}
::v-deep .el-radio__inner {
  width: 10px;
  height: 10px;
}
.el-table {
  font-size: 10px;
}
::v-deep .el-table th.el-table__cell {
  background-color: #df9b9e;
  color: #fff;
  text-align: center;
  width: auto;
  line-height: 0;
  padding: 0;
}
::v-deep .el-table .el-table__cell {
  text-align: center;
  font-weight: 500;
  font-family: 幼圆;
  padding: 0;
}
::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 0px;
}
::v-deep .el-table th.el-table__cell > .cell {
  padding: 0;
}
/* 当el-radio被选中时的背景色 */
::v-deep .el-radio .el-radio__input.is-checked .el-radio__inner {
  background-color: #b9151e;
  border-color: #b9151e;
  color: #b9151e;
}

/* 当el-radio被选中时的文本颜色 */
::v-deep .el-radio .el-radio__input.is-checked .el-radio__label {
  color: #b9151e;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #b9151e;
}
.el-button {
  color: #fff;
}
.cancelbtn .el-button:focus,
.el-button {
  color: #b9151e;
  background-color: #f5f5f5;
}
.cancelbtn .el-button:focus,
.el-button:hover {
  color: #b9151e;
  background-color: #f5f5f5;
}
</style>
